<template>
  <div class="page">
    <div class="header">
      <el-image :src="frameImg" style="width: 100%; height: 100%" />
    </div>
    <div class="wrap" id="wrap">
      <recommended-product
        :recommendList="recommendList"
        :addCount="pageData.pageSize"
        :showAddLoading="showAddLoading"
      >
        <!-- slot 需要手动设置 骨架屏 -->
        <template #header>
          <span>Search results for "{{ headerStore.inputvalue }}"</span>
        </template>
      </recommended-product>
      <div class="more">
        <div v-if="!isground" class="more-wrap" @click="loadMore">
          <span> View More</span>
          <el-icon><ArrowDown /></el-icon>
        </div>
        <div v-else>没有更多数据啦...</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { HeaderStore } from '@/store/modules/header'
import frameImg from '@/assets/images/frame.png'
import RecommendedProduct from '@/views/home/components/recommendedProduct.vue'
import { getProductData } from '@/api/home/index'

defineOptions({
  name: 'SearchDetail'
})

const showAddLoading = ref(false)
// 是否加载完成所有数据
const isground = ref(false)

const headerStore = HeaderStore()

const recommendList = ref()

// 分页
const pageData = ref({
  currentPage: 1,
  pageSize: 36,
  total: 0
})

const getData = (type: 'init' | 'add') => {
  let postData = {
    currentPageIndex: pageData.value.currentPage,
    pageSize: pageData.value.pageSize,
    totalCount: pageData.value.total,
    keywords: headerStore.inputvalue,
    country: localStorage.getItem('language')
  }
  showAddLoading.value = true
  getProductData(postData)
    .then((res) => {
      showAddLoading.value = false
      pageData.value.currentPage = res.data.currentPageIndex
      pageData.value.pageSize = res.data.pageSize
      pageData.value.total = res.data.totalCount
      if (type === 'init') {
        recommendList.value = res.data.items
      }
      if (type === 'add') {
        recommendList.value = recommendList.value.concat(res.data.items)
      }
    })
    .catch(() => {
      showAddLoading.value = false
    })
}

watch(
  () => headerStore.inputvalue,
  () => {
    pageData.value.currentPage = 1
    pageData.value.pageSize = 36
    pageData.value.total = 0
    recommendList.value = []
    getData('init')
  }
)

const loadMore = () => {
  pageData.value.currentPage++
  getData('add')
}

const scrollToTop = () => {
  let wrap = document.getElementById('wrap')
  wrap.scrollTop = 0
}

onMounted(() => {
  scrollToTop()
  getData('init')
})
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 60px;
  margin: 16px 0;
}
.wrap {
  background: #fff;
  .more {
    height: 40px;
    padding-bottom: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    .more-wrap {
      width: 140px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      cursor: pointer;
      > span {
        margin-right: 10px;
      }
    }
  }
}
</style>
